<!--
 * @Author: lhx
 * @Date: 2023-12-26 10:39:57
-->
<template>
  <div >
    <el-table
      ref="mixcTable"
      :style="isAutoFitScreen ? {'max-height': tableHeight + 'px', overflow: 'scroll'}:{}"
      v-if="auth"
      :data="data"
      stripe
      v-loading="loading"
      border
      style="width: 100%"
      @selection-change="handleSelectionChange"
      @sort-change="sortChange"
    >
      <!--选择-->
      <el-table-column v-if="hasSelection" type="selection" width="55" />
      <!--序号-->
      <el-table-column v-if="hasIndex" type="index" width="55" />
      <!--数据源-->
      <template v-for="(column, index) in columns">
        <!-- 表头存在type类型 -->
        <el-table-column v-if="column.type && (column.type == 'selection' || column.type == 'index')" :type="column.type" />
        <!-- 表头是数据或操作内容 -->
        <el-table-column v-else :label="column.label" v-bind="column">
          <template v-if="!column.type" #default="{ row, $index }">
            <slot v-if="column.slot" :name="column.slot" :row="row" :index="$index" />
          </template>
        </el-table-column>
      </template>
    </el-table>
    <el-pagination
      v-if="paginationShow"
      class="app-pagination"
      v-model:current-page="page_num"
      v-model:page-size="page_size"
      :page-sizes="[10, 20, 50, 100]"
      layout="sizes, prev, pager, next, total"
      :total="total"
    />
    <!-- <el-loading></el-loading> -->
  </div>
</template>

<script setup>
import { ElTable, ElTableColumn } from '../table/index.mjs'
import { ElPagination } from '../pagination/index.mjs'
import { vLoading } from '../loading/src/directive.mjs'
import { ref, onMounted, nextTick } from "vue";
import { usePagination } from "../../hooks/use-pagination/index.mjs";
const props = defineProps({
  auth: {
    type: Boolean,
    default: false
  },
  loading: {
    type: Boolean,
    default: () => false
  },
  // 是否可以选择
  hasSelection: {
    type: Boolean,
    default: () => false
  },
  // 是否有序列项
  hasIndex: {
    type: Boolean,
    default: () => false
  },
  // 这是相应的字段展示
  columns: {
    type: Array,
    default: () => []
  },
  // 这是数据源
  data: {
    type: Array,
    default: () => []
  },
  total: {
    type: Number,
    default: 0
  },
  initPage: {
    type: Function,
    default: () => {}
  },
  paginationShow: {
    type: Boolean,
    default: () => true
  },
  tableOutsideHeight: {
    type: Number,
    default: 350
  },
  isAutoFitScreen: {
    type: Boolean,
    default: () => true
  }
});
const mixcTable = ref()
const tableHeight = ref(0)
const emits = defineEmits(["commitSelection", "sortChange"]);
const { page_size, page_num, setPageNum } = usePagination(props.initPage);
function handleSelectionChange(val) {
  const selectionArr = [];
  val.forEach(item => {
    selectionArr.push(item);
  });
  emits("commitSelection", selectionArr);
}

function sortChange(sortDetail) {
  emits("sortChange", sortDetail);
}

onMounted(() => {
  const node = document.querySelector('.el-table')
  const pagination = document.querySelector('.app-pagination')
  nextTick(() => {
    const { top } = node.getBoundingClientRect()
    const { height } = pagination.getBoundingClientRect()
    tableHeight.value = document.body.clientHeight - top - height - 32;
  })
});

defineExpose({
  setPageNum,
  page_size,
  page_num
});
</script>
